<template>
  <div>
    <div class="A-commnet-lsit">
      <div class="comment-bulider">
        <!-- 楼主 -->
        <div class="headr-name-del">
          <!-- 头像/名字/删除 -->
          <div class="header-name">
            <div class="header-pic">
              <span>
                <router-link
                  :to="{
                    name: targetRoute,
                    query: {
                      id: AcommentData.data.createUser,
                    },
                  }"
                  target="_blank"
                >
                  <img
                    src="../../../assets/szptImages/images/builderHeader.png"
                    alt=""
                    v-if="
                      !AcommentData.data.createUserHeadshotUrl ? true : false
                    "
                  />
                  <img
                    :src="AcommentData.data.createUserHeadshotUrl"
                    alt=""
                    v-if="
                      AcommentData.data.createUserHeadshotUrl ? true : false
                    "
                  />
                </router-link>
              </span>
            </div>
            <div class="builder-name">
              <span>
                <router-link
                  :to="{
                    name: targetRoute,
                    query: {
                      id: AcommentData.data.createUser,
                    },
                  }"
                  target="_blank"
                >
                  {{ AcommentData.data.createUsername }}
                </router-link>
              </span>
            </div>
          </div>
          <div
            class="operation"
            v-show="opeateContion(AcommentData.data.createUser)"
          >
            <div class="operate">...</div>
            <div class="oper-container">
              <span @click="CommentDel(AcommentData.data.id)">删除</span>
              <!-- <span>顶置</span> -->
            </div>
          </div>
        </div>
        <div class="builder-postMsg-container">
          <div class="post-msg">
            {{ AcommentData.data.content }}
          </div>
        </div>
        <div class="time-appload-reply">
          <!-- 时间/点赞/回复 -->
          <div class="time-appload-reply-container">
            <div class="t-a-r">
              <span>{{ AcommentData.data.createTime }}</span>
            </div>
            <div class="t-a-r">
              <span @click="changeParse(AcommentData.data.id)">
                <i
                  class="iconfont icon-dianzan applod"
                  v-show="!likeFlag ? true : false"
                ></i>
                <i
                  class="iconfont icon-dianzan applod"
                  style="color: rgb(0, 195, 255)"
                  v-show="likeFlag ? true : false"
                ></i>
                &emsp14;<span style="font-size: 16px">{{
                  likeCount
                }}</span></span
              >
              <span @click="replyToUser(AcommentData)" style="margin-left: 20px"
                ><i class="el-icon-chat-dot-round comment"
                  ><span style="font-size: 16px">{{
                    AcommentData.data.replycount
                  }}</span></i
                ></span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="reply-comments">
        <div class="reply-bulider-container" v-show="showFlag">
          <!-- 点击对楼主回复后会在这里展示回复框 -->
          <div class="post-comment-box">
            <div>
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="replyMsg"
                maxlength="500"
                show-word-limit
                class="comment-post-msg"
              >
              </el-input>
            </div>
            <div class="btn-box">
              <el-button
                type="primary"
                size="small"
                class="postMsg-btn"
                @click="replyBuilder(AcommentData.data.id, AcommentData)"
                >提交评论</el-button
              >
            </div>
          </div>
        </div>
        <div class="replys">
          <!-- 这里是所有子评论 -->
          <Areply
            v-for="(replyData, index) in AcommentData.childrenlist"
            :key="index"
            :replyData="replyData"
            :initCommentList="initCommentList"
            :parentID="AcommentData.data.id"
            :builderUser="AcommentData.data.createUser"
            :ComIndex="ComIndex"
          ></Areply>
          <!-- 子评论加载更多 -->
          <div
            class="childrenListLoadMore"
            @click="loadChildren()"
            v-show="AcommentData.childrenlist.length ? true : false"
          >
            <span>点击查看更多>></span>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-drawer :visible.sync="drawer" :with-header="true" size="35%">
        <template #title>
          <div class="drawer-title">评论详情</div>
        </template>
        <div class="drawer-comment">
          <!-- <commentsDrawer
            ref="drawerDemo"
            :AcommentData="commentDetail"
            :AcommentDatalenth="AcommentDatalenth"
            :ComIndex="ComIndex"
            :initCommentList="initCommentList"
          ></commentsDrawer> -->
          <commentsDrawer
            :ref="targetId"
            :AcommentData="commentDetail"
            :AcommentDatalenth="AcommentDatalenth"
            :ComIndex="ComIndex"
            :initCommentList="initCommentList"
          ></commentsDrawer>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import Areply from "./Areply";
import { delUserComment } from "@/utils/szptUtils/commentPost.js";
import { componentForPost } from "@/api/szpt/commentForPost.js";
import { getComments } from "@/api/szpt/initCommentList";
// import { nextTick } from "vue";
import commentsDrawer from "@/views/szptProjectPage/szptDataPage/commentsDrawer.vue";
import { parse_collect_concern } from "@/api/szpt/parse";
export default {
  name: "Acomment",
  components: {
    Areply,
    commentsDrawer,
  },
  props: {
    AcommentData: {
      // 组件接受到的每一条父评论
      require: true,
      default: Array,
    },
    AcommentDataLenth: {
      require: true,
    },
    ComIndex: {
      return: true,
    },

    initCommentList: {
      require: true,
      type: Function,
    },
  },
  data() {
    return {
      targetRoute: "szptPersonalCenter",
      replyMsg: "",
      likeCount: 0,
      likeFlag: false,
      showFlag: false,
      targetId: 99999,
      commentsList: [],
      commentDetail: {},
      drawer: false,
      AcommentDatalenth: 0,
      IFreplyBuilder: Array.from(
        { length: this.AcommentDataLenth },
        () => false
      ),
      searchForm: {
        entityId: this.$route.query.id,
        entityType: "POST",
        parentup: this.$props.ComIndex,
        parentdown: this.$props.ComIndex,
        childrenup: 0,
        childrendown: 5,
        sort: "hot",
      },
    };
  },
  computed: {
    userMsg() {
      // console.log("===", this.$store.getters["userData/getUserDataMsg"]);
      return this.$store.getters["userData/getUserDataMsg"];
    },
  },
  methods: {
    // 加载评论
    getCommentsByIndex(sortType) {
      this.$modal.loading("玩命加载中....");
      if (sortType) {
        this.searchForm.sort = sortType;
      } else {
        this.searchForm.sort = "hot";
      }
      getComments(this.searchForm)
        .then((resp) => {
          if (resp.code === 200 && resp.data.data) {
            this.commentDetail = resp.data.data[0];
            this.drawer = true;
            this.targetId = resp.data.data[0].data.id;
            const demoID = this.targetId;
            this.$nextTick(() => {
              setTimeout(() => {
                this.$refs[demoID].judgeFlag();
                this.$refs[demoID].handleData();
              }, 100);
            });
            this.$modal.closeLoading();
          }
        })
        .catch((err) => {
          console.log(err);
          this.$modal.closeLoading();
        });
    },
    loadChildren() {
      let sort = JSON.parse(window.sessionStorage.getItem("sort"));
      if (sort) {
        this.getCommentsByIndex(sort);
      }
      // 加载评论
    },
    /**
     * @description 删除用户评论
     */
    CommentDel(commentID) {
      this.$modal.loading("玩命加载中....");
      if (commentID) {
        this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delUserComment(commentID)
              .then((value) => {
                if (value) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  setTimeout(() => {
                    this.$props.initCommentList("hot");
                  }, 800);
                } else {
                  this.$message({
                    type: "ereor",
                    message: "删除失败！!",
                  });
                }
                this.$modal.closeLoading();
              })

              .catch((err) => {
                this.$message({
                  type: "ereor",
                  message: "系统错误！!",
                });
                this.$modal.closeLoading();
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
            this.$modal.closeLoading();
          });
      }
    },
    // 改变点赞状态
    changeParse(id) {
      parse_collect_concern(id, "SZPT_SZCOMMENT_SYSUSER_LIKE")
        .then((resp) => {
          if (resp.code === 200) {
            if (this.likeFlag) {
              this.likeCount = this.likeCount - 1;
              this.$message.success("已取消点赞！");
            } else {
              this.likeCount = this.likeCount + 1;
              this.$message.success("点赞成功！");
            }
            this.likeFlag = !this.likeFlag;
          } else {
            this.$message.error("点赞状态更新失败！");
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 判断子列表是否存在
    childrenListCheck(childrenlistArry) {
      if (childrenlistArry) {
        if (childrenlistArry.length > 0) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    /**
     * @description 回复用户评论
     */
    replyBuilder(ReplyToID, AcommentData) {
      if (this.replyMsg) {
        var commentData = {
          createUser: this.userMsg.data.userId,
          status: 0,
          parentId: ReplyToID,
          content: this.replyMsg,
          targetId: ReplyToID,
          entityId: this.$route.query.id,
          entityType: "POST",
        };
        componentForPost(commentData)
          .then((resp) => {
            if (resp.code === 200 && resp.data) {
              this.$message.success("回复成功！");
              setTimeout(() => {
                this.replyData = "";
                this.$props.initCommentList("time");
              }, 800);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$modal.alertWarning("评论内容不能为空！");
      }
      this.showFlag = !this.showFlag;
    },
    replyToUser(AcommentData) {
      console.log("拿到的回复数据", AcommentData);
      this.showFlag = !this.showFlag;
      console.log("showFlag", this.showFlag);
      // 接受当前点击的评论指令
      // console.log("当前数组值",this.IFreplyBuilder);
      this.replyMsg = "";
      this.IFreplyBuilder = this.IFreplyBuilder.map((value, index) => {
        if (index == IFreplyBuilderIndex) {
          return true;
        } else {
          return false;
        }
      });
    },

    /**
     * @description 判断操作是否可以显示
     */
    opeateContion(createUser) {
      // console.log(this.userMsg);
      if (createUser) {
        if (this.userMsg) {
          // 判断用户是否登录，没有登录直接看不到
          //判断当前评论是否是用户评论的
          if (this.userMsg.data.userId === createUser) {
            return true;
          }
        } else {
          return false;
        }
      }
      return false;
    },
  },
  created() {},
  mounted() {
    // 为鼠标添加点击事件监听
    document.addEventListener("mousedown", this.LostFocus);
    this.likeCount = parseInt(this.$props.AcommentData.data.parsecount);
    this.likeFlag = this.$props.AcommentData.data.islike;
  },
  beforeDestroy() {
    // 将添加的监听事件移除
    document.removeEventListener("mousedown", this.LostFocus);
  },
};
</script>

<style scoped>
.A-commnet-lsit {
  width: 100%;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(236, 235, 235);
  background-color: transparent;
}
.comment-bulider {
  width: 100%;
  height: auto;
  min-height: 50px;
  background-color: transparent;
}
.reply-bulider-container {
  background-color: #f7f8fc;
}
.headr-name-del {
  width: 100%;
  height: 46px;
  line-height: 46px;
  display: flex;
  justify-content: space-between;
  background-color: transparent;
}
.header-name {
  width: auto;
  height: 46px;
  display: flex;
  align-content: flex-start;
  background-color: transparent;
}
.header-pic {
  width: 46px;
  height: 46px;
  object-fit: cover;
  overflow: hidden;
  cursor: pointer;
  border-radius: 23px;
}
.header-pic img {
  width: 100%;
  height: 100%;
}
.builder-name {
  margin-left: 10px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
}
.builder-name:hover {
  color: #00c2fd;
}
.operation {
  position: relative;
}
.operate {
  cursor: pointer;
  width: 50px;
  text-align: center;
  position: relative;
  font-weight: bold;
  color: #666;
}
.operation:hover .oper-container {
  display: block;
}
.oper-container {
  width: 50px;
  height: auto;
  display: none;
  border-radius: 5px;
  overflow: hidden;
  color: #666;
  background-color: #fdfdfd;
}
.oper-container span {
  display: block;
  width: 100%;
  text-align: center;
  height: 30px;
  cursor: pointer;
  font-size: 16px;
  line-height: 30px;
}
.oper-container span:hover {
  color: red;
  background-color: #e8e6e6;
}
.builder-postMsg-container {
  width: 100%;
  height: auto;

  padding-left: 54px;
}
.post-msg {
  width: 100%;
  height: auto;
  padding: 10px;
  word-break: break-all;
  color: #666;
}
.time-appload-reply {
  width: 100%;
  height: auto;
  padding-left: 53px;
}
.time-appload-reply-container {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  background-color: transparent;
}
.t-a-r {
  color: #666;
  cursor: pointer;
}
.t-a-r span {
  display: inline-block;
  margin-left: 10px;
}
.reply-comments {
  width: 100%;
  height: auto;
  padding-top: 10px;
  padding-left: 50px;
  background-color: transparent;
}
.replys {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background-color: #f7f8fc;
}
/**
   * load-more 加载更多
   */
.load-more {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  color: #666;
  border-top: 1px solid rgb(202, 200, 200);
  border-bottom: 1px solid rgb(202, 200, 200);
}
.load-more span {
  width: 100%;
  height: 100%;
}
.btn-box {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.postMsg-btn {
  display: inline-block;
  position: relative;
  border-radius: 5px;
}
.childrenListLoadMore {
  width: 100%;
  height: auto;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  color: #999;
}
.childrenListLoadMore:hover {
  color: #00c2fd;
}
.applod,
.comment {
  font-size: 21px;
}
.post-comment-box {
  padding: 10px;
}
.drawer-title {
  width: 100%;
  height: 30px;
  font-weight: bold;
  color: #666;
}
.drawer-comment {
  padding: 0 20px;
}
</style>
